﻿@model List<FO.Models.SpeFolder>
@{
    ViewBag.Title = "" + FOResource.UI.CpanelLayout.mngfile + "";
    Layout = "~/Views/Shared/_CpanelLayout.cshtml";
}
<link rel="stylesheet" href="@Url.Content("~/Content/Cpanel/treeview/jquery.treeview.css")" />
<link href="@Url.Content("~/Content/Cpanel/contextmenu/jquery.contextMenu.css")" rel="stylesheet" type="text/css" />


<script src="@Url.Content("~/Content/Cpanel/treeview/jquery.treeview.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Cpanel/contextmenu/jquery.ui.position.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Cpanel/contextmenu/jquery.contextMenu.js")" type="text/javascript"></script>

<script type="text/javascript">
    jQuery.fn.center = function () {
        this.css("position", "absolute");
        this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
                                                $(window).scrollTop()) + "px");
        this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
                                                $(window).scrollLeft()) + "px");
        return this;
    }

    function ajaxdbSelect(sfile) {
        currentSkfile = $(sfile);
        $(".skselected").removeClass("skselected");
        if (!currentSkfile.hasClass("skselected")) {
            currentSkfile.addClass("skselected");
        }
    }
    function ajaxSelect(sfile) {
        //if ($('.mydivclass').length) {
        currentSkfile = $(sfile);
        if (currentSkfile.hasClass("skselected")) {
            currentSkfile.removeClass("skselected");
        }
        else {
            currentSkfile.addClass("skselected");
        }
    }
    function ajaxRfiles(stringpath) {
        $.getJSON("/File/ReadFiles", { folderPath: stringpath }, function (rvdata) {
            htmlcode = "";

            var currentFolder = $(".skselected-folder").attr("rel");
            $("#skFolderContent").html("<center><img src='/Content/loading.gif'></center>");
            $(rvdata).each(function () {
                htmlcode += "<div class='skfile' onclick=\"return ajaxSelect(this)\;\" rel=" + $(this).attr("Name") + ">";
                htmlcode += "<div class='skfileicon'>";
                if ($(this).attr("isImage")) {
                    htmlcode += "<img src='" + "/" + currentFolder + "/" + $(this).attr("Name") + "' class='skfileicon-image'/>";
                }
                else {

                }
                htmlcode += "</div>";
                htmlcode += "<div class='skfilename'><p>" + $(this).attr("Name") + "</p></div>";
                htmlcode += "</div>";
            });
            $("#skFolderContent").html(htmlcode);
        });
    }
    function ajaxRtree(mtree) {
        $(".skselected-folder").removeClass("skselected-folder");

        $(mtree).addClass("skselected-folder");
        currentFolder = $(mtree);
        var uploader = new qq.FileUploader({
            element: document.getElementById('file-uploader'),
            multiple: false,
            allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
            params: { FolderPath: currentFolder.attr("rel") },
            multiple: true,
            acceptFiles: "image/*",
            action: '@Url.Action("Upload", "File")',
            onComplete: function (id, fileName, responseJSON) {
                if (uploader.getInProgress() > 0) {
                    return;
                }
                else {
                    $("#refresh-listfile").click();
                }
            }
        });
        var thispath = $(mtree).attr("rel");
        ajaxRfiles(thispath);
        subul = currentFolder.next();
        parentFolder = currentFolder.parent().parent().prev();

        $.getJSON("/File/ReadFolder", { folderPath: thispath }, function (rvdata) {

            subul.addClass("closed");
            subul.html(""); htmlcode = "";
            $(rvdata).each(function () {
                if (parseInt($(this).attr("hasFiles")) > 0 ? "class=closed" : "") {
                    htmlcode += "<li class=closed><span class='folder' onclick=\"return ajaxRtree(this)\;\" rel='" + currentFolder.attr("rel") + "/" + $(this).attr("Name") + "'>";
                    htmlcode += $(this).attr("Name");
                    htmlcode += "</span><ul></ul></li>";
                } else {
                    htmlcode += "<li><span class='folder' onclick=\"return ajaxRtree(this)\;\" rel='" + currentFolder.attr("rel") + "/" + $(this).attr("Name") + "'>";
                    htmlcode += $(this).attr("Name");
                    htmlcode += "</span></li>";
                }
            });
            subul.html(htmlcode);
        });
    }
    function ajaxReadFolder(foldername) {

        return false;
    }
    $(document).ready(function (e) {

        $(function () {
            $.contextMenu({
                selector: '.skfile',
                callback: function (key, options) {
                    var currentFileName = $(this).attr("rel");
                    var currentFolder = $(".skselected-folder").attr("rel");
                    var currentFile = $(this);
                    var currentPath = currentFolder + "/" + currentFileName;
                    if (key == "edit") {
                        $("#editFile").css("display", "block");
                        $(".edNewFileName").val(currentFileName);
                        $(".edFileName").html(currentFileName);
                    }
                    else if (key == 'delete') {
                        //do some thing to delete file.
                        filecount = $(".skselected").length;
                        var msgtext = "tập tin " + currentFileName;

                        if (filecount > 0) {
                            msgtext = filecount + " tập tin đã chọn";
                            if (confirm("Bạn có muốn xóa " + msgtext + " ?")) {
                                $(".skselected").each(function () {
                                    var currentFileSeleted = $(this);
                                    currentFileSeletedFilename = currentFileSeleted.attr("rel");
                                    pathtodelete = currentFolder + "/" + currentFileSeletedFilename;
                                    $.getJSON("/File/ajaxDeleteFile", { spath: pathtodelete }, function (rvdata) {
                                        if (rvdata.status == true) {
                                            currentFileSeleted.remove();
                                        }
                                        else {
                                            alert(rvdata.msg);
                                        }
                                    });
                                });
                            }
                        }
                        else {
                            if (confirm("Bạn có muốn xóa " + msgtext + " ?")) {
                                //do something to deletefile..

                                pathtodelete = currentFolder + "/" + currentFileName;
                                //ajaxDeleteFile
                                $.getJSON("/File/ajaxDeleteFile", { spath: pathtodelete }, function (rvdata) {
                                    if (rvdata.status == true) {
                                        currentFile.remove();
                                    }
                                    else {
                                        alert(rvdata.msg);
                                    }
                                });
                            }
                        }
                    }
                },
                items: {
                    "edit": { name: "Rename", icon: "edit", accesskey: "e" },
                    "delete": { name: "Delete", icon: "delete" },
                    "sep1": "---------",
                    "quit": { name: "Quit", icon: "quit" }
                }
            });
        });
        $("#editFile").center();
        $("#browser").treeview();
        $("#edSave").click(function () {
            var currentFolder = $(".skselected-folder").attr("rel");
            var path = $(".edFileName").html();
            var newfile = $(".edNewFileName").val();
            $.getJSON("/File/ajaxRenameFile", { spath: currentFolder + "/" + path, foder: currentFolder, newfilename: newfile }, function (rvdata) {
                if (rvdata.status == true) {
                    ajaxRfiles(currentFolder);
                    $("#editFile").css("display", "none");
                }
                else {
                    alert(rvdata.msg);
                }
            });
        });

        $("#can").click(function () { $("#editFile").css("display", "none"); });
        $("#refresh-listfile").click(function () {
            var currentFolder = $(".skselected-folder").attr("rel");
            ajaxRfiles(currentFolder);
            return false;
        });

    });
</script>
<style>
    body {
        font-family: Tahoma, Geneva, sans-serif;
    }

    #skyFileManger {
        width: 100%;
        margin: 0px auto;
        min-height: 300px;
        border: 1px solid #E4E4E4;
        padding: 3px;
    }

    #skFolder {
        width: 200px;
        float: left;
        height: 400px;
        overflow: auto;
    }

    #skFolderContent {
        width: 1043px;
        float: left;
        background: whiteSmoke;
        height: 400px;
        overflow: auto;
        padding: 5px;
    }

    .skfile {
        width: 100px;
        height: 140px;
        border: 2px solid #ccc;
        padding: 5px;
        background: #FFF;
        float: left;
        margin: 10px;
        cursor: pointer;
    }

        .skfile:hover {
            border: 2px solid #ddeff8;
            background: #f2f9fc;
        }

    .skfilename {
        padding: 2px;
        text-align: center;
        margin-top: 10px;
    }

    .skselected {
        background: #ffdd88;
        border: 2px solid #ffbb00;
    }

        .skselected:hover {
            background: #ffdd88;
            border: 2px solid #ffbb00;
        }

    .skselected-folder {
        color: #000;
        font-weight: bold;
    }

    .skupload {
        padding-top: 5px;
    }

    .skselected-folder:hover {
        color: #000 !important;
    }

    .skfileicon-image {
        max-width: 90px;
        max-height: 100px;
    }

    .skfileicon {
        text-align: center;
        min-width: 90px;
        min-height: 60px;
    }

    #editFile {
        width: 300px;
        background: #3F3F49;
        padding: 10px 0px;
    }

        #editFile label {
            font-weight: bold;
            color: White;
            padding-bottom: -20px;
            padding-left: 15px;
        }

        #editFile input {
            width: 100px;
            height: 35px;
            padding-right: 10px;
        }

    .edFileName {
        color: White;
        margin: 10px 10px 0px 10px;
        display: block;
    }

    #editFile input.edNewFileName {
        width: auto;
        height: 5px;
        padding-right: 10px;
        margin-top: 10px;
        margin-left: 10px;
    }

    #editFile input#edSave {
        margin-left: 10px;
        margin-top: 5px;
    }
</style>

<div id="editFile" style="display: none;">
    <label>FileName:</label>
    <span class="edFileName"></span>
    <br />
    <label>New File Name:</label><b><input type="text" class="edNewFileName" /></b><span class="edExtention"></span><br />
    <input type="button" id="edSave" value="Save" /><input type="button" id="can" value="Cancel" />
</div>
<div class="cbread_crumb">
    <ul>
        <li><a href="/Cpanel">Control panel</a></li>
        <li class="lastli"><a href="/File">Quản lý tập tin</a></li>
    </ul>
</div>
<div class="content-module-heading cf">

    <h3 class="fl">Quản lý tập tin</h3>

</div>
<!-- end content-module-heading -->


<div class="innerLR">
    <div class="content-box" style="width: 100%">
        <!-- Start Content Box -->
        <div id="skyFileManger">
            <div id="skFolder">
                <ul id="browser" class="filetree">
                    <li><span class="folder" id="rootFolder" rel="Content">Content</span>
                        <ul>
                            @foreach (var directory in Model)
                            {
                                if (directory.hasFiles)
                                {
                                <li @(directory.hasFiles ? "class=closed" : "") ><span onclick="return ajaxRtree(this);" class="folder" rel="Content/@Url.Content(directory.Name)">@directory.Name</span>
                                    <ul>
                                        <li><span class="folder">Loadding...</span></li>
                                    </ul>
                                </li>
                                }
                                else
                                { 
                                <li><span class="folder" onclick="return ajaxRtree(this);" rel="Content/@Url.Content(directory.Name)">@directory.Name</span></li>
                                }
                            }
                        </ul>
                    </li>
                </ul>
            </div>
            <div id="skFolderContent"></div>
             <div class="clr"></div>
            <div class="skupload">
                <a href="#" style="display: none;" id="refresh-listfile">
                    <img src="@Url.Content("~/Content/loading-icon.gif")" /></a>
                <div id="file-uploader" class="ip" style="padding-left: 3px">
                    <noscript>          
                                            <p>Please enable JavaScript to use file uploader.</p>
                                            <!-- or put a simple form for upload here -->
                                        </noscript>
                </div>
                 <div class="clr"></div>
            </div>
        </div>
    </div>
</div>
